tags: 鐵人賽 React javascript nodejs vscode

一晃眼來到鐵人賽第六天！今天我們要用迴圈的方式，讓React自動幫我們產生多個components，同時藉由迴圈及array的搭配，讓component更豐富。

用迴圈來產生多個React Component

• 重新設計index.js，我們建立一個函式moreHelloWorlds，並賦予一個接收參數num，來讓迴圈自動的產生多個components。

• 這裡有個設計的重點，我們會使用一個array來當作存放多個components的容器，最後回傳這個容器，JSX接收到後，就會自動解析裡面的內容，然後展開所有的component。

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from "./components/HelloWorld" //<-- 引入我們的HelloWorld component

function moreHelloWorlds(num){
  let compList = [];  //<-- 宣告一個空的array list, 準備儲存重複的
  for (let i=0; i<num; i++){
    compList.push(<HelloWorld msg={"Well Done~ Baby!!"} 
                              fontColor={"gold"}   //<--加入文字顏色 
                              bgColor={"black"}    //<--加入背景顏色 
                  />);
  }

  return compList; //<-- 回傳array list
}



ReactDOM.render(
  moreHelloWorlds(3), //<-- 接收到moreHelloWorlds(3)產生的3個components, 並render出去
  document.getElementById('root')
);

• Magic~
  

來點進階的變化

• 優秀的前端工程師，怎能容忍單調的設計，來，我們讓畫面多些豐富的元素。

• 這裡我們新增兩個array，分別存放著顏色 及 title文字，利用迴圈的id來取得對應的資訊，並塞到對應的component之中。

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from "./components/HelloWorld" //<-- 引入我們的HelloWorld component

// 新增以下兩個array
const ColorTable = ["gold", "yellowgreen", "purple"]
const TitleList = ["One", "Two", "Three"];

function moreHelloWorlds(num){
  let compList = [];  //<-- 宣告一個空的array list, 準備儲存重複的

  // 改用map來寫一下
  compList = TitleList.map((title, id)=>{
    return(<HelloWorld msg={title} 
              fontColor={ColorTable[id]}   //<--加入文字顏色 
              bgColor={"black"}    //<--加入背景顏色 
            />)
  })


  return compList; //<-- 回傳array list
}



ReactDOM.render(
  moreHelloWorlds(3), //<-- 接收到moreHelloWorlds(3)產生的3個components, 並render出去
  document.getElementById('root')
);

• 自動化搞定一切，還不給自己帥一個
  

加個Key，並給一個獨一無二的值，讓React更懂你的心

• 有些事情現在不做，以後出bug時也忘了發生什麼事了

• 眼尖的朋友應該有發現，Chrome inspector發現，有個 Warnning ，裡頭藏了一個神秘的訊息
  
  

• React官網這麼說
  

• 意思是說，React需要你給予 array裡的每個component賦予一個key值，且這個key值必須是獨一無二 。

• React在進行畫面渲染(render)時，會經過一個叫做Virtual DOM的檢查階段，React利用這個檢查機制，找出哪些component需要重新render，哪些不用，專注處理有改變的compoent，提高效能。

• 打開index.js來加個·key

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from "./components/HelloWorld" //<-- 引入我們的HelloWorld component


// 新增以下兩個array
const ColorTable = ["gold", "yellowgreen", "purple"]
const TitleList = ["One", "Two", "Three"]; 

function moreHelloWorlds(num){
  let compList = [];  //<-- 宣告一個空的array list, 準備儲存重複的
  // for (let i=0; i<num; i++){
  //   compList.push(<HelloWorld msg={"Well Done~ Baby!!"} 
  //                             fontColor={"gold"}   //<--加入文字顏色 
  //                             bgColor={"black"}    //<--加入背景顏色 
  //                 />);
  // }

  // 改用map來寫一下
  compList = TitleList.map((title, id)=>{
    return(<HelloWorld 
              key={title+id} //<--加個key值，並用title+id讓他具備獨一無二的識別名稱
              msg={title} 
              fontColor={ColorTable[id]}   //<--加入文字顏色 
              bgColor={"black"}    //<--加入背景顏色 
            />)
  })


  return compList; //<-- 回傳array list
}



ReactDOM.render(
  moreHelloWorlds(3), //<-- 接收到moreHelloWorlds(3)產生的3個components, 並render出去
  document.getElementById('root')
);

Warnning不見囉

結論

• 鐵人賽的第六天，我們學習到了：

• 利用迴圈來產生多個component
• 多個component必須要用array容器來存放他
• 加個key讓React更懂你

• 堅持到第六天，代表你有滿滿的決心，給自己歡呼一番，加油！
• 有任何問題或者你覺得我的東西寫得還不錯，也歡迎給我一些留言喔

教學資源

-React列表與Key
-React官網這麼說